@charset "utf-8";
@import 'reset';
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}
.web{
    width: r(640);
    height: r(800);
}
        header {
            .top {
                ul {
                    width: r(640);
                    height: r(75);
                    border-bottom: 1px solid #A7A7A7;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    li {
                        display: flex;
                        align-items: center;
                        font-size: r(30);
                        color: #343434;
                        a {
                            display: flex;
                            align-items: center;
                            margin: 0 r(29);
                            font-size: r(24);
                            color: #585858;
                            img {
                                height: r(38);
                            }
                        }
                    }
                    .con{
                        margin: 0 auto;
                        transform: translate(-35%);
                    }
                }
            }
            
        }
.conter{
    width: r(640);
    .block{
        margin:  0 auto;
        width: r(584);
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: r(98);
        border-bottom: 1px solid #DCDCDC;
        ul{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            li{
                font-size: r(30);
                padding-left:r(24);
            }
            li:first-of-type{
                color: #737373;
            }
        }
        .img{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            img{
                width: r(15);
            }
            .img_co{
                padding-right: r(13);
                .code{
                width:r(35);
                }
            }
            
        }
        .label{
            height: r(90);
        }
        .btn{
            width: r(100);
            height: r(60);
            background-color: #FFFFFF;
            border: 1px solid #B2B2B2;
            border-radius: r(30);
            display: flex;
            justify-content: flex-end;
            padding-left: r(2);
            align-items: center;
        }
        #active,#active-a,#active-b{
            display: none;
        }
        #active:checked+.btn,#active-a:checked+.btn,#active-b:checked+.btn{
            width: r(100);
            height: r(60);
            background-color: #000000;
            border-radius: r(30);
            display: flex;
            justify-content: flex-start;
            padding-right: r(2);
            align-items: center;
        }
        .cir{
                width: r(57);
                height: r(57);
                border-radius:50%;
                background-color: #ffffff;
                border: 1px solid #B2B2B2;
            }
    }
    .line{
        border: none;
    }
    .cir_message{
        width: r(640);
        background: #F2F2F2;
        height:r(60) ;
        ul{
            width: r(584);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            li{
                font-size: r(24);
                color: #737373;
                padding-left: r(53);
                line-height: r(60);
                span{
                   color: #343434;
                   padding-left: r(18); 
                }
            }
        }
    }
    
}
